﻿<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:n="http://nRoute/schemas/2010/xaml" 	
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
	xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
	xmlns:ee="http://schemas.microsoft.com/expression/2010/effects" 	
	xmlns:local="clr-namespace:nRoute.Samples.Netflix.Controls"
	mc:Ignorable="d">
    
	<!-- HEADER LINKS RELATEd (Text) -->
	
	<ItemsPanelTemplate x:Key="HeaderLinksItemsTemplate">
		<StackPanel Orientation="Horizontal" Style="{StaticResource LinksStackPanelStyle}"/>
	</ItemsPanelTemplate>
	
	<DataTemplate x:Key="HeaderLinkItemTemplate">
		<DataTemplate.Resources>
			<Storyboard x:Key="OnLoaded1">
				<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="button">
					<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0">
						<EasingDoubleKeyFrame.EasingFunction>
							<CubicEase EasingMode="EaseOut"/>
						</EasingDoubleKeyFrame.EasingFunction>
					</EasingDoubleKeyFrame>
				</DoubleAnimationUsingKeyFrames>
				<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="button">
					<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1">
						<EasingDoubleKeyFrame.EasingFunction>
							<CircleEase EasingMode="EaseIn"/>
						</EasingDoubleKeyFrame.EasingFunction>
					</EasingDoubleKeyFrame>
				</DoubleAnimationUsingKeyFrames>
			</Storyboard>
		</DataTemplate.Resources>
		<Button x:Name="button" Style="{StaticResource LinkStyle}" Content="{Binding Title}" 
			ToolTipService.ToolTip="{Binding Description}" RenderTransformOrigin="0.5,0.5" Opacity="0">
			<Button.RenderTransform>
				<TransformGroup>
					<ScaleTransform/>
					<SkewTransform/>
					<RotateTransform/>
					<TranslateTransform X="-50"/>
				</TransformGroup>
			</Button.RenderTransform>
			<i:Interaction.Triggers>
				<i:EventTrigger EventName="Click">
					<n:ExecuteSiteMapNodeAction SiteMapNode="{Binding}"/>
				</i:EventTrigger>
			</i:Interaction.Triggers>
		</Button>
		<DataTemplate.Triggers>
			<EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="button">
				<BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/>
			</EventTrigger>
		</DataTemplate.Triggers>
	</DataTemplate>
            			
    
	<!-- TOPIC TITLE RELATED (Text) -->
	
	<DataTemplate x:Key="TopicTitleTemplate">			
		<TextBlock Text="{Binding Name}" Margin="20,4,8,4" FontSize="12.5" TextTrimming="WordEllipsis" 
			FontFamily="Segoe UI Semibold" Foreground="#FF444649"/>
	</DataTemplate>
		
	<Style x:Key="TopicTitleBoxItemStyle" TargetType="{x:Type ListBoxItem}">
		<Setter Property="Padding" Value="0"/>
		<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
		<Setter Property="VerticalContentAlignment" Value="Top"/>
		<Setter Property="Background" Value="Transparent"/>
		<Setter Property="BorderThickness" Value="0"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type ListBoxItem}">
					<Grid x:Name="grid" Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
						<Grid.RenderTransform>
							<TransformGroup>
								<ScaleTransform/>
								<SkewTransform/>
								<RotateTransform/>
								<TranslateTransform/>
							</TransformGroup>
						</Grid.RenderTransform>
						<VisualStateManager.VisualStateGroups>
							<VisualStateGroup x:Name="CommonStates">
								<VisualState x:Name="Normal"/>
								<VisualState x:Name="MouseOver">
									<Storyboard>
										<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="Disabled">
									<Storyboard>
										<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
									</Storyboard>
								</VisualState>
							</VisualStateGroup>
							<VisualStateGroup x:Name="SelectionStates">
								<VisualState x:Name="Unselected"/>
								<VisualState x:Name="Selected">
									<Storyboard>
										<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
									</Storyboard>
								</VisualState>
							</VisualStateGroup>
							<VisualStateGroup x:Name="FocusStates">
								<VisualState x:Name="Focused"/>
								<VisualState x:Name="Unfocused"/>
							</VisualStateGroup>
							<VisualStateGroup x:Name="LayoutStates" ei:ExtendedVisualStateManager.UseFluidLayout="True">
								<VisualStateGroup.Transitions>
									<VisualTransition GeneratedDuration="0:0:0.5">
										<VisualTransition.GeneratedEasingFunction>
											<QuinticEase EasingMode="EaseOut"/>
										</VisualTransition.GeneratedEasingFunction>
									</VisualTransition>
								</VisualStateGroup.Transitions>
								<VisualState x:Name="AfterLoaded"/>
								<VisualState x:Name="BeforeLoaded">
									<Storyboard>
										<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="grid">
											<EasingDoubleKeyFrame KeyTime="0" Value="50"/>
										</DoubleAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="BeforeUnloaded"/>
							</VisualStateGroup>
						</VisualStateManager.VisualStateGroups>
						<VisualStateManager.CustomVisualStateManager>
							<ei:ExtendedVisualStateManager/>
						</VisualStateManager.CustomVisualStateManager>
						<Border BorderBrush="#FFB2B1B1" />
						<Rectangle x:Name="fillColor" Fill="#FFE7E8E8" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
						<Rectangle x:Name="fillColor2" Fill="#FFD8D8D9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Opacity="0"/>
						<ContentControl x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" 
							Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
							Margin="{TemplateBinding Padding}" Foreground="#FF1D1D1D"/>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
		<Setter Property="Foreground" Value="#FF444649"/>
	</Style>

    <!-- MOVIE TITLE RELATED -->
    
    <DataTemplate x:Key="TitleItemTemplate">
    	<DataTemplate.Resources>
    		<Storyboard x:Key="OnMouseEnter1">
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" 
					Storyboard.TargetName="border">
    				<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1">
    					<EasingDoubleKeyFrame.EasingFunction>
    						<QuarticEase EasingMode="EaseOut"/>
    					</EasingDoubleKeyFrame.EasingFunction>
    				</EasingDoubleKeyFrame>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    		<Storyboard x:Key="OnMouseLeave1">
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
    				<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0">
    					<EasingDoubleKeyFrame.EasingFunction>
    						<QuarticEase EasingMode="EaseOut"/>
    					</EasingDoubleKeyFrame.EasingFunction>
    				</EasingDoubleKeyFrame>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    	</DataTemplate.Resources>
        <Grid x:Name="grid" Width="110" Height="135" Background="Transparent" Cursor="Hand" Margin="5" 
			RenderTransformOrigin="0.5,0.5">        	
			
				<i:Interaction.Triggers>
					<i:EventTrigger EventName="MouseLeftButtonUp">												
						<n:NavigateAction HandlerName="ContentContainer" Url="Content/Netflix/Title/" >
							<n:DependencyParameter Key="MovieTitle" Value="{Binding}"/>
						</n:NavigateAction>						
					</i:EventTrigger>
				</i:Interaction.Triggers>
			
            <Image Width="90" Height="90" Margin="5" VerticalAlignment="Top" Source="{Binding BoxArt.LargeUrl}" Stretch="UniformToFill"/>
			<Border x:Name="border" Width="90" Height="90" Margin="5" VerticalAlignment="Top" BorderThickness="1" BorderBrush="#FF747474" Opacity="0" >
				<Border.Effect>
					<DropShadowEffect Color="#FF7A7A7A" ShadowDepth="0" BlurRadius="8"/>
				</Border.Effect>
				<Border.Background>
					<RadialGradientBrush GradientOrigin="0.294,0.286" Center="0.426,0.379" RadiusY="1.04" RadiusX="1.04">
						<GradientStop Color="#59353535" Offset="0.63"/>
						<GradientStop Color="#4CFFFFFF" Offset="0.004"/>
					</RadialGradientBrush>
				</Border.Background>
			</Border>
        	<TextBlock Margin="5,99,5,0" Text="{Binding Name}" VerticalAlignment="Top" FontSize="12" FontFamily="Segoe UI Semibold" FontWeight="Bold" Foreground="#FF444649">
        		<TextBlock.OpacityMask>
        			<LinearGradientBrush EndPoint="130,0" StartPoint="6,-0.112" MappingMode="Absolute">
        				<GradientStop Color="Black"/>
        				<GradientStop Offset="0.763"/>
        				<GradientStop Color="#FF0D0D0D" Offset="0.603"/>
        			</LinearGradientBrush>
        		</TextBlock.OpacityMask>
        	</TextBlock>
        	<TextBlock Margin="5,116,5,0" VerticalAlignment="Top" FontSize="12" FontFamily="Segoe UI Semibold" Foreground="#FF8F8F8F"><TextBlock.OpacityMask>
        			<LinearGradientBrush EndPoint="130,0" StartPoint="6,-0.112" MappingMode="Absolute">
        				<GradientStop Color="Black"/>
        				<GradientStop Offset="0.763"/>
        				<GradientStop Color="#FF0D0D0D" Offset="0.603"/>
        			</LinearGradientBrush>
        		</TextBlock.OpacityMask><Run Text="{Binding ReleaseYear}"/><Run Text=" "/><Run Text=" (" /><Run Text="{Binding AverageRating}"/><Run Text="/5)" /></TextBlock>
        </Grid>
    	<DataTemplate.Triggers>
    		<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="grid">
    			<BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
    		</EventTrigger>
    		<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="grid">
    			<BeginStoryboard x:Name="OnMouseLeave1_BeginStoryboard" Storyboard="{StaticResource OnMouseLeave1}"/>
    		</EventTrigger>
    	</DataTemplate.Triggers>
    </DataTemplate>

    <ItemsPanelTemplate x:Key="TitlesPanelTemplate">
        <WrapPanel/>
    </ItemsPanelTemplate>
	
    <Style x:Key="TitleContainerItemStyle" TargetType="{x:Type ListBoxItem}">
    	<Setter Property="Background" Value="Transparent"/>
    	<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    	<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    	<Setter Property="Padding" Value="2,0,0,0"/>
    	<Setter Property="Template">
    		<Setter.Value>
    			<ControlTemplate TargetType="{x:Type ListBoxItem}">
    				<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" 
						BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"
						Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
    					<VisualStateManager.VisualStateGroups>
    						<VisualStateGroup x:Name="SelectionStates">
    							<VisualState x:Name="Unselected"/>
    							<VisualState x:Name="Selected"/>
    							<VisualState x:Name="SelectedUnfocused"/>
    						</VisualStateGroup>
    						<VisualStateGroup x:Name="CommonStates">
    							<VisualState x:Name="Normal"/>
    							<VisualState x:Name="MouseOver"/>
    							<VisualState x:Name="Disabled"/>
    						</VisualStateGroup>
    					</VisualStateManager.VisualStateGroups>
    					<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
							SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
							VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    				</Border>
    				<ControlTemplate.Triggers>
    					<Trigger Property="IsEnabled" Value="false">
    						<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
    					</Trigger>
    				</ControlTemplate.Triggers>
    			</ControlTemplate>
    		</Setter.Value>
    	</Setter>
    </Style>
	
	<!-- PERSON TEMPLATE (Text) -->
	
	<DataTemplate x:Key="PersonLinkTemplate">
		<TextBlock Text="{Binding Name}" Margin="0,0,0,4" TextWrapping="Wrap" Cursor="Hand" HorizontalAlignment="Left" >
			<i:Interaction.Triggers>
				<i:EventTrigger EventName="MouseLeftButtonUp">
					<n:NavigateAction Url="Content/Netflix/Person/" >
						<n:DependencyParameter Key="Person" Value="{Binding}"/>
					</n:NavigateAction>
				</i:EventTrigger>
			</i:Interaction.Triggers>
		</TextBlock>
	</DataTemplate>
	
</ResourceDictionary>